import React, { Component } from 'react';
import { Form, Col, Row, DatePicker, Select, Input, Card, Button } from 'antd';
import moment from 'moment';

const { Item } = Form;
const { Option } = Select;

const editData = {
    name: '马云',
    school: '清华大学',
    time: '1989-02-10',
};

@Form.create()
class FormPage extends Component {
    state = {}

    // 提交
    handleSubmit = (e) => {
        e.preventDefault();
        const { form } = this.props;
        form.validateFields((err, fieldValue) => {
            if (fieldValue.time) fieldValue.time = moment(fieldValue.time).format('YYYY-MM-DD HH:mm:ss');
            console.log('v', fieldValue);
        });
    }

    render() {
        const { form } = this.props;
        const { getFieldDecorator } = form;
        return (
            <Form onSubmit={this.handleSubmit}>
                <Card>
                    <Row gutter={24}>
                        <Col span={8}>
                            <Item label='员工姓名'>
                                {
                                    getFieldDecorator('name', {
                                        initialValue: editData.name,
                                    })(
                                        <Input placeholder='请输入员工姓名' />
                                    )
                                }
                            </Item>
                        </Col>
                        <Col span={8}>
                            <Item label='毕业学校'>
                                {
                                    getFieldDecorator('school', {
                                        initialValue: editData.school,
                                    })(
                                        <Select style={{ width: '100%' }} placeholder='请选择毕业学校'>
                                            <Option key='清华大学' value='清华大学'>清华大学</Option>
                                            <Option key='郑州大学' value='郑州大学'>郑州大学</Option>
                                            <Option key='北京大学' value='北京大学'>北京大学</Option>
                                        </Select>
                                    )
                                }
                            </Item>
                        </Col>
                        <Col span={8}>
                            <Item label='入职时间'>
                                {
                                    getFieldDecorator('time', {
                                        initialValue: moment(editData.time),
                                    })(
                                        <DatePicker style={{ width: '100%' }} />
                                    )
                                }
                            </Item>
                        </Col>
                    </Row>
                    <Row>
                        <Button type='primary' htmlType='submit'>提交</Button>
                        {/* <Button type='primary' onClick={this.handleSubmit}>提交</Button> */}
                        <Button style={{ marginLeft: 8 }}>重置</Button>
                    </Row>
                </Card>
            </Form>
        );
    }
}


export default FormPage;